<template>
	<view class="body">
		<xk-header :headerbg="true" :back="true" title="退租管理"></xk-header>
		<view class="list">
			<view class="list-item">
				<view>退租单号:20210601001</view>
			</view>
			<picker mode="date" :value="date" @change="dateChange">
				<view class="list-item">
					<view>退租日期:</view>
					<view :class="date ? 'right-title1' : 'right-title1 right-title1-empty'">{{date ? date : "请选择"}}</view>
					<image mode="aspectFill" class="jiantou" src="/static/jiantou.png"/>
				</view>
			</picker>
			<view class="list-item">
				<view>合同编号:</view>
				<input class="title1" type="number" placeholder="请输入合同编号" placeholder-style="color:#ccc"/>
			</view>
			<view class="list-item">
				<view>企业名称:</view>
				<input class="title1" type="text" placeholder="请输入申请人企业名称" placeholder-style="color:#ccc"/>
			</view>
			<view class="list-item">
				<view>退租场地:</view>
				<input class="title1" type="text" placeholder="请输入退租场地" placeholder-style="color:#ccc"/>
			</view>
			<view class="list-item">
				<view>租赁面积:</view>
				<input class="title1" type="text" placeholder="请输入租赁面积" placeholder-style="color:#ccc"/>
			</view>
			<view class="list-item">
				<view>月租金(元):</view>
				<input class="title1" type="text" placeholder="请输入月租金" placeholder-style="color:#ccc"/>
			</view>
			<view class="list-item">
				<view>申请人:</view>
				<input class="title1" type="text" placeholder="请输入申请人" placeholder-style="color:#ccc"/>
			</view>
			<view class="list-item">
				<view>联系方式:</view>
				<input class="title1" type="text" placeholder="请输入联系方式" placeholder-style="color:#ccc"/>
			</view>
			<view class="list-item">
				<view>联系方式:</view>
				<input class="title1" type="text" placeholder="请输入联系方式" placeholder-style="color:#ccc"/>
			</view>
		</view>
		<view class="desc-view">
			<view>退租说明:</view>
			<view>1.营业执照地址变更工商受理函复印件或变更地址后新营业执照复印件并加盖公章。</view>
			<view>2.保证金额退回需提供</view>
			<view>a.“保证金收据”原件，原件遗失需提供“遗失声明”并加盖公章；</view>
			<view>b.转账：银行账户信息并加盖公章；支票：委托书、被委托人身份证复印件各一份并加盖公章。</view>
		</view>
		<view class="common-btn" @click="onSubmit()">确认提交</view>
	</view>
</template>

<script>
	let noImg = '/static/no-img.png';
	export default {
		data() {
			return {
				date: "",
			};
		},
		onLoad(){
		},
		methods:{

			dateChange(e) {
				this.date = e.detail.value
			},
			onSubmit() {
				this.$util.confirm({
					content: "确认要提交退租信息？"
				}).then((isConfirm)=>{
					if (isConfirm) {
						uni.redirectTo({
							url: "/pagesC/eviction/eviction-result"
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>

.list {
	margin: 20rpx 30rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;

	.content-title{
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
		display: flex;
		align-items: center;
		padding: 32rpx 0rpx;
		.title-icon{
			width: 12rpx;
			height: 40rpx;
			background-color: #2C72FF;
			border-top-right-radius: 8rpx;
			border-bottom-right-radius: 8rpx;
			margin-right: 10rpx;
		}
	}
	.list-item {
		display: flex;
		flex-direction: row;
		align-items: center;

		color: #333;
		font-size: 28rpx;
		padding: 35rpx 20rpx;

		.title1 {
			color: #333;
			margin-left: 20rpx;
		}

		.right-title1{
			flex: 1;
			text-align: right;
			color: #333;
		}
		.right-title1-empty {
			color: #ccc;
		}
		.jiantou {
			width: 14rpx;
			height: 24rpx;
			margin-left: 10rpx;
		}
	}

	.desc-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		:last-child {
			margin-top: 20rpx;
			padding: 5rpx;
			width: 100%;
			height: 120rpx;
			background-color: #F9F9F9;

			>textarea {
				margin: 0rpx;
			}
		}
	}
	.item-border {
		border-bottom: 1rpx #F8F8F8 solid;
	}
}

.desc-view {
	display: flex;
	flex-direction: column;
	margin: 0rpx 30rpx;
	background-color: #FFFFFF;
	color: #333;
	font-size: 28rpx;
	padding: 20rpx;

	:first-child {
		font-weight: bold;
		margin-bottom: 10rpx;
	}
}

</style>
